<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>票务管理系统</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        success: '#00B42A',
                        danger: '#F53F3F',
                        warning: '#FF7D00',
                        info: '#86909C',
                        light: '#F2F3F5',
                        dark: '#1D2129'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
        }
    </style>

    <style>
        /* 全局样式 */
        body {
            font-family: 'Inter', system-ui, sans-serif;
        }

        /* 动画效果 */
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 加载动画 */
        .loader {
            border-top-color: #165DFF;
            animation: spinner 0.6s linear infinite;
        }

        @keyframes spinner {
            to { transform: rotate(360deg); }
        }
    </style>
</head>

<body class="bg-gray-50 text-dark font-inter">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-50 transition-custom">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <i class="fa fa-ticket text-primary text-2xl"></i>
            <h1 class="text-xl font-bold text-primary">票务管理系统</h1>
        </div>

        <div class="flex items-center space-x-4">
            <button id="themeToggle" class="p-2 rounded-full hover:bg-gray-100 transition-custom">
                <i class="fa fa-moon-o text-info"></i>
            </button>
            <div class="flex items-center space-x-2">
                <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary">
                <span class="hidden md:inline font-medium">管理员</span>
            </div>
        </div>
    </div>
</header>

<main class="container mx-auto px-4 py-6">
    <!-- 状态概览卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-xl p-6 card-shadow hover:shadow-lg transition-custom">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-info text-sm">总票务数量</p>
                    <h3 class="text-2xl font-bold mt-1" id="totalTickets">0</h3>
                </div>
                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                    <i class="fa fa-ticket text-primary"></i>
                </div>
            </div>
            <div class="mt-4 text-sm flex items-center">
          <span class="text-success flex items-center">
            <i class="fa fa-arrow-up mr-1"></i>12%
          </span>
                <span class="text-info ml-2">较上月</span>
            </div>
        </div>

        <div class="bg-white rounded-xl p-6 card-shadow hover:shadow-lg transition-custom">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-info text-sm">今日售票</p>
                    <h3 class="text-2xl font-bold mt-1" id="todaySales">0</h3>
                </div>
                <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center">
                    <i class="fa fa-shopping-cart text-secondary"></i>
                </div>
            </div>
            <div class="mt-4 text-sm flex items-center">
          <span class="text-success flex items-center">
            <i class="fa fa-arrow-up mr-1"></i>8%
          </span>
                <span class="text-info ml-2">较昨日</span>
            </div>
        </div>

        <div class="bg-white rounded-xl p-6 card-shadow hover:shadow-lg transition-custom">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-info text-sm">总销售额</p>
                    <h3 class="text-2xl font-bold mt-1" id="totalRevenue">¥0</h3>
                </div>
                <div class="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center">
                    <i class="fa fa-money text-success"></i>
                </div>
            </div>
            <div class="mt-4 text-sm flex items-center">
          <span class="text-success flex items-center">
            <i class="fa fa-arrow-up mr-1"></i>15%
          </span>
                <span class="text-info ml-2">较上月</span>
            </div>
        </div>

        <div class="bg-white rounded-xl p-6 card-shadow hover:shadow-lg transition-custom">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-info text-sm">活跃用户</p>
                    <h3 class="text-2xl font-bold mt-1" id="activeUsers">0</h3>
                </div>
                <div class="w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center">
                    <i class="fa fa-users text-warning"></i>
                </div>
            </div>
            <div class="mt-4 text-sm flex items-center">
          <span class="text-danger flex items-center">
            <i class="fa fa-arrow-down mr-1"></i>3%
          </span>
                <span class="text-info ml-2">较昨日</span>
            </div>
        </div>
    </div>

    <!-- 功能标签页 -->
    <div class="mb-6 border-b border-gray-200">
        <ul class="flex flex-wrap -mb-px" id="functionTabs" role="tablist">
            <li class="mr-2" role="presentation">
                <button class="inline-block p-4 border-b-2 border-primary text-primary font-medium rounded-t-lg" id="create-tab" data-tab="create" type="button" role="tab">
                    <i class="fa fa-plus-circle mr-2"></i>创建票务
                </button>
            </li>
            <li class="mr-2" role="presentation">
                <button class="inline-block p-4 border-b-2 border-transparent hover:text-primary hover:border-primary/30 rounded-t-lg" id="purchase-tab" data-tab="purchase" type="button" role="tab">
                    <i class="fa fa-shopping-cart mr-2"></i>购买票务
                </button>
            </li>
            <li class="mr-2" role="presentation">
                <button class="inline-block p-4 border-b-2 border-transparent hover:text-primary hover:border-primary/30 rounded-t-lg" id="query-tab" data-tab="query" type="button" role="tab">
                    <i class="fa fa-search mr-2"></i>查询票务
                </button>
            </li>
            <li class="mr-2" role="presentation">
                <button class="inline-block p-4 border-b-2 border-transparent hover:text-primary hover:border-primary/30 rounded-t-lg" id="updateStock-tab" data-tab="updateStock" type="button" role="tab">
                    <i class="fa fa-refresh mr-2"></i>更新库存
                </button>
            </li>
            <li role="presentation">
                <button class="inline-block p-4 border-b-2 border-transparent hover:text-primary hover:border-primary/30 rounded-t-lg" id="updatePrice-tab" data-tab="updatePrice" type="button" role="tab">
                    <i class="fa fa-tag mr-2"></i>更新价格
                </button>
            </li>
        </ul>
    </div>

    <!-- 功能内容区域 -->
    <div class="tab-content fade-in">
        <!-- 创建票务表单 -->
        <div id="create-tab-content" class="tab-pane bg-white rounded-xl p-6 card-shadow">
            <h2 class="text-xl font-bold mb-6 flex items-center">
                <i class="fa fa-plus-circle text-primary mr-2"></i>创建新票务
            </h2>

            <form id="createTicketForm" class="space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="ticketName" class="block text-sm font-medium text-gray-700 mb-1">票务名称 <span class="text-danger">*</span></label>
                        <input type="text" id="ticketName" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-3">座位详情 <span class="text-danger">*</span>
                        <button type="button" id="addSeatBtn" class="ml-2 text-sm text-primary hover:text-primary/80 flex items-center">
                            <i class="fa fa-plus-circle mr-1"></i>添加区域
                        </button>
                    </label>

                    <div id="seatDetailsContainer" class="space-y-4">
                        <div class="seat-detail bg-gray-50 p-4 rounded-lg border border-gray-200">
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">区域名称</label>
                                    <input type="text" name="seatDetailsDTOList[0].region" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">数量</label>
                                    <input type="number" name="seatDetailsDTOList[0].count" min="1" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">单价 (¥)</label>
                                    <input type="number" name="seatDetailsDTOList[0].price" min="0.01" step="0.01" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                                </div>
                            </div>
                            <button type="button" class="remove-seat mt-2 text-danger text-sm hover:text-danger/80 hidden">
                                <i class="fa fa-trash-o mr-1"></i>删除
                            </button>
                        </div>
                    </div>
                </div>

                <div class="flex justify-end pt-4 border-t border-gray-100">
                    <button type="reset" class="px-6 py-2 border border-gray-300 rounded-lg mr-3 hover:bg-gray-50 transition-custom">
                        重置
                    </button>
                    <button type="submit" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom flex items-center">
                        <i class="fa fa-check mr-2"></i>创建票务
                    </button>
                </div>
            </form>
        </div>

        <!-- 购买票务表单 -->
        <div id="purchase-tab-content" class="tab-pane bg-white rounded-xl p-6 card-shadow hidden">
            <h2 class="text-xl font-bold mb-6 flex items-center">
                <i class="fa fa-shopping-cart text-secondary mr-2"></i>购买票务
            </h2>

            <form id="purchaseTicketForm" class="space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="buyUsername" class="block text-sm font-medium text-gray-700 mb-1">用户名 <span class="text-danger">*</span></label>
                        <input type="text" id="buyUsername" name="username" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                    </div>

                    <div>
                        <label for="buyTicketName" class="block text-sm font-medium text-gray-700 mb-1">票务名称 <span class="text-danger">*</span></label>
                        <input type="text" id="buyTicketName" name="ticketName" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                    </div>

                    <div>
                        <label for="buyRegion" class="block text-sm font-medium text-gray-700 mb-1">区域 <span class="text-danger">*</span></label>
                        <input type="text" id="buyRegion" name="region" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                    </div>

                    <div>
                        <label for="buyCount" class="block text-sm font-medium text-gray-700 mb-1">购买数量 <span class="text-danger">*</span></label>
                        <input type="number" id="buyCount" name="count" min="1" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                    </div>
                </div>

                <div class="flex justify-end pt-4 border-t border-gray-100">
                    <button type="reset" class="px-6 py-2 border border-gray-300 rounded-lg mr-3 hover:bg-gray-50 transition-custom">
                        重置
                    </button>
                    <button type="submit" class="px-6 py-2 bg-secondary text-white rounded-lg hover:bg-secondary/90 transition-custom flex items-center">
                        <i class="fa fa-check mr-2"></i>确认购买
                    </button>
                </div>
            </form>
        </div>

        <!-- 查询票务表单 -->
        <div id="query-tab-content" class="tab-pane bg-white rounded-xl p-6 card-shadow hidden">
            <h2 class="text-xl font-bold mb-6 flex items-center">
                <i class="fa fa-search text-primary mr-2"></i>查询票务
            </h2>

            <div class="mb-6">
                <div class="flex border-b border-gray-200">
                    <button type="button" class="query-type-btn px-4 py-2 text-primary border-b-2 border-primary font-medium" data-type="id">
                        按ID查询
                    </button>
                    <button type="button" class="query-type-btn px-4 py-2 text-gray-500 hover:text-primary" data-type="name">
                        按名称查询
                    </button>
                </div>
            </div>

            <form id="queryTicketForm" class="space-y-6">
                <div class="query-by-id">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="queryId" class="block text-sm font-medium text-gray-700 mb-1">票务ID <span class="text-danger">*</span></label>
                            <input type="number" id="queryId" name="id" min="1" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                        </div>
                    </div>
                </div>

                <div class="query-by-name hidden">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="queryName" class="block text-sm font-medium text-gray-700 mb-1">票务名称 <span class="text-danger">*</span></label>
                            <input type="text" id="queryName" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                        </div>
                    </div>
                </div>

                <div class="flex justify-end pt-4 border-t border-gray-100">
                    <button type="submit" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom flex items-center">
                        <i class="fa fa-search mr-2"></i>查询
                    </button>
                </div>
            </form>

            <!-- 查询结果展示 -->
            <div id="queryResult" class="mt-8 hidden">
                <h3 class="text-lg font-semibold mb-4 pb-2 border-b border-gray-200">查询结果</h3>
                <div class="space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <p class="text-sm text-gray-500">票务ID</p>
                            <p class="text-lg font-medium" id="resultId">-</p>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <p class="text-sm text-gray-500">票务名称</p>
                            <p class="text-lg font-medium" id="resultName">-</p>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <p class="text-sm text-gray-500">总库存</p>
                            <p class="text-lg font-medium" id="resultStock">-</p>
                        </div>
                    </div>

                    <div>
                        <p class="text-sm font-medium mb-2">区域详情</p>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead>
                                <tr>
                                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">区域</th>
                                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
                                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单价 (¥)</th>
                                </tr>
                                </thead>
                                <tbody id="resultSeats" class="bg-white divide-y divide-gray-200">
                                <!-- 结果将动态填充 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 更新库存表单 -->
        <div id="updateStock-tab-content" class="tab-pane bg-white rounded-xl p-6 card-shadow hidden">
            <h2 class="text-xl font-bold mb-6 flex items-center">
                <i class="fa fa-refresh text-primary mr-2"></i>更新票务库存
            </h2>

            <form id="updateStockForm" class="space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="updateStockName" class="block text-sm font-medium text-gray-700 mb-1">票务名称 <span class="text-danger">*</span></label>
                        <input type="text" id="updateStockName" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                    </div>

                    <div>
                        <label for="updateStockId" class="block text-sm font-medium text-gray-700 mb-1">票务ID <span class="text-danger">*</span></label>
                        <input type="number" id="updateStockId" name="id" min="1" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-3">座位库存更新
                        <button type="button" id="addUpdateSeatBtn" class="ml-2 text-sm text-primary hover:text-primary/80 flex items-center">
                            <i class="fa fa-plus-circle mr-1"></i>添加区域
                        </button>
                    </label>

                    <div id="updateSeatDetailsContainer" class="space-y-4">
                        <div class="seat-detail bg-gray-50 p-4 rounded-lg border border-gray-200">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">区域名称</label>
                                    <input type="text" name="seatDetailsDTOList[0].region" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">新增数量</label>
                                    <input type="number" name="seatDetailsDTOList[0].count" min="1" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                                </div>
                            </div>
                            <button type="button" class="remove-seat mt-2 text-danger text-sm hover:text-danger/80 hidden">
                                <i class="fa fa-trash-o mr-1"></i>删除
                            </button>
                        </div>
                    </div>
                </div>

                <div class="flex justify-end pt-4 border-t border-gray-100">
                    <button type="reset" class="px-6 py-2 border border-gray-300 rounded-lg mr-3 hover:bg-gray-50 transition-custom">
                        重置
                    </button>
                    <button type="submit" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom flex items-center">
                        <i class="fa fa-check mr-2"></i>更新库存
                    </button>
                </div>
            </form>
        </div>

        <!-- 更新价格表单 -->
        <div id="updatePrice-tab-content" class="tab-pane bg-white rounded-xl p-6 card-shadow hidden">
            <h2 class="text-xl font-bold mb-6 flex items-center">
                <i class="fa fa-tag text-primary mr-2"></i>更新票务价格
            </h2>

            <form id="updatePriceForm" class="space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="updatePriceName" class="block text-sm font-medium text-gray-700 mb-1">票务名称 <span class="text-danger">*</span></label>
                        <input type="text" id="updatePriceName" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                    </div>

                    <div>
                        <label for="updatePriceRegion" class="block text-sm font-medium text-gray-700 mb-1">区域 <span class="text-danger">*</span></label>
                        <input type="text" id="updatePriceRegion" name="region" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                    </div>

                    <div>
                        <label for="newPrice" class="block text-sm font-medium text-gray-700 mb-1">新单价 (¥) <span class="text-danger">*</span></label>
                        <input type="number" id="newPrice" name="price" min="0.01" step="0.01" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                    </div>
                </div>

                <div class="flex justify-end pt-4 border-t border-gray-100">
                    <button type="reset" class="px-6 py-2 border border-gray-300 rounded-lg mr-3 hover:bg-gray-50 transition-custom">
                        重置
                    </button>
                    <button type="submit" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom flex items-center">
                        <i class="fa fa-check mr-2"></i>更新价格
                    </button>
                </div>
            </form>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200 mt-10">
    <div class="container mx-auto px-4 py-6">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="flex items-center mb-4 md:mb-0">
                <i class="fa fa-ticket text-primary text-xl mr-2"></i>
                <span class="font-medium">票务管理系统</span>
            </div>
            <div class="text-sm text-gray-500">
                &copy; 2023 票务管理系统 版权所有
            </div>
        </div>
    </div>
</footer>

<!-- 通知提示框 -->
<div id="notification" class="fixed top-20 right-4 px-6 py-3 rounded-lg shadow-lg transform translate-x-full transition-all duration-300 flex items-center z-50 max-w-sm">
    <i id="notificationIcon" class="mr-3 text-xl"></i>
    <p id="notificationMessage"></p>
</div>

<!-- 加载动画 -->
<div id="loader" class="fixed inset-0 bg-black/5 flex items-center justify-center z-50 hidden">
    <div class="w-12 h-12 rounded-full border-4 border-gray-200 loader"></div>
</div>

<script>
    // DOM 元素加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 标签页切换功能
        const tabButtons = document.querySelectorAll('#functionTabs button');
        tabButtons.forEach(button => {
            button.addEventListener('click', function() {
                // 移除所有标签页的活跃状态
                tabButtons.forEach(btn => {
                    btn.classList.remove('border-primary', 'text-primary');
                    btn.classList.add('border-transparent', 'hover:text-primary', 'hover:border-primary/30');
                });

                // 设置当前标签页为活跃状态
                this.classList.remove('border-transparent', 'hover:text-primary', 'hover:border-primary/30');
                this.classList.add('border-primary', 'text-primary');

                // 隐藏所有内容区域
                const tabPanes = document.querySelectorAll('.tab-pane');
                tabPanes.forEach(pane => {
                    pane.classList.add('hidden');
                });

                // 显示当前标签页对应的内容
                const tabId = this.getAttribute('data-tab');
                document.getElementById(`${tabId}-tab-content`).classList.remove('hidden');
                document.getElementById(`${tabId}-tab-content`).classList.add('fade-in');
            });
        });

        // 查询类型切换
        const queryTypeBtns = document.querySelectorAll('.query-type-btn');
        queryTypeBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                // 移除所有按钮的活跃状态
                queryTypeBtns.forEach(b => {
                    b.classList.remove('text-primary', 'border-b-2', 'border-primary', 'font-medium');
                    b.classList.add('text-gray-500', 'hover:text-primary');
                });

                // 设置当前按钮为活跃状态
                this.classList.remove('text-gray-500', 'hover:text-primary');
                this.classList.add('text-primary', 'border-b-2', 'border-primary', 'font-medium');

                // 显示对应的查询表单
                const type = this.getAttribute('data-type');
                if (type === 'id') {
                    document.querySelector('.query-by-id').classList.remove('hidden');
                    document.querySelector('.query-by-name').classList.add('hidden');
                    document.getElementById('queryId').required = true;
                    document.getElementById('queryName').required = false;
                } else {
                    document.querySelector('.query-by-id').classList.add('hidden');
                    document.querySelector('.query-by-name').classList.remove('hidden');
                    document.getElementById('queryId').required = false;
                    document.getElementById('queryName').required = true;
                }
            });
        });

        // 添加座位区域功能
        function setupAddSeatFunctionality(addBtnId, containerId) {
            const addBtn = document.getElementById(addBtnId);
            const container = document.getElementById(containerId);

            addBtn.addEventListener('click', function() {
                const seatCount = container.querySelectorAll('.seat-detail').length;
                const isUpdateStock = containerId === 'updateSeatDetailsContainer';

                const seatDiv = document.createElement('div');
                seatDiv.className = 'seat-detail bg-gray-50 p-4 rounded-lg border border-gray-200 fade-in';

                if (isUpdateStock) {
                    seatDiv.innerHTML = `
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">区域名称</label>
                  <input type="text" name="seatDetailsDTOList[${seatCount}].region" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">新增数量</label>
                  <input type="number" name="seatDetailsDTOList[${seatCount}].count" min="1" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                </div>
              </div>
              <button type="button" class="remove-seat mt-2 text-danger text-sm hover:text-danger/80">
                <i class="fa fa-trash-o mr-1"></i>删除
              </button>
            `;
                } else {
                    seatDiv.innerHTML = `
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">区域名称</label>
                  <input type="text" name="seatDetailsDTOList[${seatCount}].region" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">数量</label>
                  <input type="number" name="seatDetailsDTOList[${seatCount}].count" min="1" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">单价 (¥)</label>
                  <input type="number" name="seatDetailsDTOList[${seatCount}].price" min="0.01" step="0.01" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom" required>
                </div>
              </div>
              <button type="button" class="remove-seat mt-2 text-danger text-sm hover:text-danger/80">
                <i class="fa fa-trash-o mr-1"></i>删除
              </button>
            `;
                }

                container.appendChild(seatDiv);

                // 为新添加的删除按钮添加事件监听
                const removeBtn = seatDiv.querySelector('.remove-seat');
                removeBtn.addEventListener('click', function() {
                    seatDiv.classList.add('fade-out');
                    setTimeout(() => {
                        container.removeChild(seatDiv);
                        // 重新编号
                        renumberSeatDetails(container);
                    }, 300);
                });

                // 显示所有删除按钮（当有多个区域时）
                updateRemoveButtonsVisibility(container);
            });
        }

        // 重新编号座位详情
        function renumberSeatDetails(container) {
            const seatDetails = container.querySelectorAll('.seat-detail');
            seatDetails.forEach((detail, index) => {
                const inputs = detail.querySelectorAll('input');
                inputs.forEach(input => {
                    const name = input.getAttribute('name');
                    if (name) {
                        const newName = name.replace(/\[(\d+)\]/, `[${index}]`);
                        input.setAttribute('name', newName);
                    }
                });
            });
        }

        // 更新删除按钮可见性
        function updateRemoveButtonsVisibility(container) {
            const seatDetails = container.querySelectorAll('.seat-detail');
            const removeButtons = container.querySelectorAll('.remove-seat');

            if (seatDetails.length <= 1) {
                removeButtons.forEach(btn => btn.classList.add('hidden'));
            } else {
                removeButtons.forEach(btn => btn.classList.remove('hidden'));
            }
        }

        // 初始化添加座位功能
        setupAddSeatFunctionality('addSeatBtn', 'seatDetailsContainer');
        setupAddSeatFunctionality('addUpdateSeatBtn', 'updateSeatDetailsContainer');

        // 为初始删除按钮添加事件监听
        document.querySelectorAll('.remove-seat').forEach(btn => {
            btn.addEventListener('click', function() {
                const seatDiv = this.closest('.seat-detail');
                const container = seatDiv.parentElement;

                seatDiv.classList.add('fade-out');
                setTimeout(() => {
                    container.removeChild(seatDiv);
                    renumberSeatDetails(container);
                    updateRemoveButtonsVisibility(container);
                }, 300);
            });
        });

        // 显示通知
        function showNotification(message, type = 'success') {
            const notification = document.getElementById('notification');
            const icon = document.getElementById('notificationIcon');
            const messageEl = document.getElementById('notificationMessage');

            // 设置通知类型样式
            notification.className = 'fixed top-20 right-4 px-6 py-3 rounded-lg shadow-lg transform translate-x-full transition-all duration-300 flex items-center z-50 max-w-sm';

            if (type === 'success') {
                notification.classList.add('bg-success', 'text-white');
                icon.className = 'fa fa-check-circle mr-3 text-xl';
            } else if (type === 'error') {
                notification.classList.add('bg-danger', 'text-white');
                icon.className = 'fa fa-exclamation-circle mr-3 text-xl';
            } else if (type === 'warning') {
                notification.classList.add('bg-warning', 'text-white');
                icon.className = 'fa fa-exclamation-triangle mr-3 text-xl';
            } else {
                notification.classList.add('bg-primary', 'text-white');
                icon.className = 'fa fa-info-circle mr-3 text-xl';
            }

            // 设置消息内容
            messageEl.textContent = message;

            // 显示通知
            setTimeout(() => {
                notification.classList.remove('translate-x-full');
            }, 100);

            // 3秒后自动隐藏
            setTimeout(() => {
                notification.classList.add('translate-x-full');
            }, 3000);
        }

        // 显示加载动画
        function showLoader() {
            document.getElementById('loader').classList.remove('hidden');
        }

        // 隐藏加载动画
        function hideLoader() {
            document.getElementById('loader').classList.add('hidden');
        }

        // 表单序列化
        function serializeForm(form) {
            const formData = new FormData(form);
            const data = {};

            formData.forEach((value, key) => {
                // 处理数组格式的字段，如 seatDetailsDTOList[0].region
                const arrayMatch = key.match(/^(\w+)\[(\d+)\]\.(\w+)$/);
                if (arrayMatch) {
                    const arrayName = arrayMatch[1];
                    const index = arrayMatch[2];
                    const propName = arrayMatch[3];

                    if (!data[arrayName]) {
                        data[arrayName] = [];
                    }

                    if (!data[arrayName][index]) {
                        data[arrayName][index] = {};
                    }

                    // 转换数值类型
                    if (propName === 'count' || propName === 'price' || propName === 'id') {
                        data[arrayName][index][propName] = Number(value);
                    } else {
                        data[arrayName][index][propName] = value;
                    }
                } else {
                    // 转换数值类型
                    if (key === 'count' || key === 'price' || key === 'id') {
                        data[key] = Number(value);
                    } else {
                        data[key] = value;
                    }
                }
            });

            return data;
        }

        // 创建票务表单提交
        document.getElementById('createTicketForm').addEventListener('submit', function(e) {
            e.preventDefault();
            showLoader();

            const formData = serializeForm(this);

            // 模拟API请求
            setTimeout(() => {
                hideLoader();
                showNotification('票务创建成功！');
                this.reset();

                // 重置座位详情为一个
                const container = document.getElementById('seatDetailsContainer');
                while (container.children.length > 1) {
                    container.removeChild(container.lastChild);
                }
                updateRemoveButtonsVisibility(container);

                // 更新统计数据
                document.getElementById('totalTickets').textContent =
                    (parseInt(document.getElementById('totalTickets').textContent) + 1).toString();
            }, 1000);

            // 实际API调用代码

            fetch('http://localhost:7788/create', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify(formData),
            })
            .then(response => response.json())
            .then(data => {
              hideLoader();
              if (data.success) {
                showNotification('票务创建成功！');
                this.reset();
              } else {
                showNotification('票务创建失败：' + (data.msg || '未知错误'), 'error');
              }
            })
            .catch(error => {
              hideLoader();
              showNotification('网络错误，请稍后重试', 'error');
              console.error('Error:', error);
            });

        });

        // 购买票务表单提交
        document.getElementById('purchaseTicketForm').addEventListener('submit', function(e) {
            e.preventDefault();
            showLoader();

            const formData = serializeForm(this);

            // 模拟API请求
            setTimeout(() => {
                hideLoader();
                showNotification('购票成功！');
                this.reset();

                // 更新统计数据
                document.getElementById('todaySales').textContent =
                    (parseInt(document.getElementById('todaySales').textContent) + formData.count).toString();

                const revenue = parseFloat(document.getElementById('totalRevenue').textContent.replace('¥', '')) +
                    (formData.count * 80); // 假设平均票价80
                document.getElementById('totalRevenue').textContent = '¥' + revenue.toFixed(2);

                document.getElementById('activeUsers').textContent =
                    (new Set([...document.getElementById('activeUsers').textContent, formData.username]).size).toString();
            }, 1000);

            // 实际API调用代码
            /*
            fetch('/sobing', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify(formData),
            })
            .then(response => response.json())
            .then(data => {
              hideLoader();
              if (data.success) {
                showNotification('购票成功！');
                this.reset();
              } else {
                showNotification('购票失败：' + (data.msg || '未知错误'), 'error');
              }
            })
            .catch(error => {
              hideLoader();
              showNotification('网络错误，请稍后重试', 'error');
              console.error('Error:', error);
            });
            */
        });

        // 查询票务表单提交
        document.getElementById('queryTicketForm').addEventListener('submit', function(e) {
            e.preventDefault();
            showLoader();

            const formData = serializeForm(this);
            const isQueryById = !document.querySelector('.query-by-id').classList.contains('hidden');

            // 模拟API请求
            setTimeout(() => {
                hideLoader();

                // 模拟查询结果
                const result = {
                    id: isQueryById ? formData.id : 1000 + Math.floor(Math.random() * 9000),
                    name: isQueryById ? '2023年度音乐会' : formData.name,
                    stock: 150 + Math.floor(Math.random() * 350),
                    seatDetailsDTOList: [
                        { region: 'A区', count: 50 + Math.floor(Math.random() * 100), price: 380 + Math.floor(Math.random() * 200) },
                        { region: 'B区', count: 80 + Math.floor(Math.random() * 120), price: 280 + Math.floor(Math.random() * 150) },
                        { region: 'C区', count: 120 + Math.floor(Math.random() * 180), price: 180 + Math.floor(Math.random() * 100) }
                    ]
                };

                // 显示查询结果
                document.getElementById('resultId').textContent = result.id;
                document.getElementById('resultName').textContent = result.name;
                document.getElementById('resultStock').textContent = result.stock;

                // 填充座位详情表格
                const seatsContainer = document.getElementById('resultSeats');
                seatsContainer.innerHTML = '';

                result.seatDetailsDTOList.forEach(seat => {
                    const row = document.createElement('tr');
                    row.className = 'fade-in';
                    row.innerHTML = `
              <td class="px-4 py-3 whitespace-nowrap">${seat.region}</td>
              <td class="px-4 py-3 whitespace-nowrap">${seat.count}</td>
              <td class="px-4 py-3 whitespace-nowrap">${seat.price.toFixed(2)}</td>
            `;
                    seatsContainer.appendChild(row);
                });

                document.getElementById('queryResult').classList.remove('hidden');
            }, 1000);

            // 实际API调用代码
            /*
            const url = isQueryById ? '/query' : '/querybyname';
            fetch(url, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify(formData),
            })
            .then(response => response.json())
            .then(data => {
              hideLoader();
              if (data.success && data.data) {
                // 显示查询结果
                document.getElementById('resultId').textContent = data.data.id;
                document.getElementById('resultName').textContent = data.data.name;
                document.getElementById('resultStock').textContent = data.data.stock;

                // 填充座位详情表格
                const seatsContainer = document.getElementById('resultSeats');
                seatsContainer.innerHTML = '';

                data.data.seatDetailsDTOList.forEach(seat => {
                  const row = document.createElement('tr');
                  row.innerHTML = `
                    <td class="px-4 py-3 whitespace-nowrap">${seat.region}</td>
                    <td class="px-4 py-3 whitespace-nowrap">${seat.count}</td>
                    <td class="px-4 py-3 whitespace-nowrap">${seat.price}</td>
                  `;
                  seatsContainer.appendChild(row);
                });

                document.getElementById('queryResult').classList.remove('hidden');
              } else {
                showNotification('查询失败：' + (data.msg || '未找到相关票务'), 'error');
                document.getElementById('queryResult').classList.add('hidden');
              }
            })
            .catch(error => {
              hideLoader();
              showNotification('网络错误，请稍后重试', 'error');
              console.error('Error:', error);
            });
            */
        });

        // 更新库存表单提交
        document.getElementById('updateStockForm').addEventListener('submit', function(e) {
            e.preventDefault();
            showLoader();

            const formData = serializeForm(this);

            // 模拟API请求
            setTimeout(() => {
                hideLoader();
                showNotification('库存更新成功！');
                this.reset();

                // 重置座位详情为一个
                const container = document.getElementById('updateSeatDetailsContainer');
                while (container.children.length > 1) {
                    container.removeChild(container.lastChild);
                }
                updateRemoveButtonsVisibility(container);
            }, 1000);

            // 实际API调用代码
            /*
            fetch('/update', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify(formData),
            })
            .then(response => response.json())
            .then(data => {
              hideLoader();
              if (data.success) {
                showNotification('库存更新成功！');
                this.reset();
              } else {
                showNotification('库存更新失败：' + (data.msg || '未知错误'), 'error');
              }
            })
            .catch(error => {
              hideLoader();
              showNotification('网络错误，请稍后重试', 'error');
              console.error('Error:', error);
            });
            */
        });

        // 更新价格表单提交
        document.getElementById('updatePriceForm').addEventListener('submit', function(e) {
            e.preventDefault();
            showLoader();

            const formData = serializeForm(this);

            // 模拟API请求
            setTimeout(() => {
                hideLoader();
                showNotification('价格更新成功！');
                this.reset();
            }, 1000);

            // 实际API调用代码
            /*
            fetch('/updateprice', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify(formData),
            })
            .then(response => response.json())
            .then(data => {
              hideLoader();
              if (data.success) {
                showNotification('价格更新成功！');
                this.reset();
              } else {
                showNotification('价格更新失败：' + (data.msg || '未知错误'), 'error');
              }
            })
            .catch(error => {
              hideLoader();
              showNotification('网络错误，请稍后重试', 'error');
              console.error('Error:', error);
            });
            */
        });

        // 初始化统计数据
        document.getElementById('totalTickets').textContent = Math.floor(Math.random() * 50 + 10).toString();
        document.getElementById('todaySales').textContent = Math.floor(Math.random() * 200 + 50).toString();
        document.getElementById('totalRevenue').textContent = '¥' + (Math.random() * 100000 + 50000).toFixed(2);
        document.getElementById('activeUsers').textContent = Math.floor(Math.random() * 100 + 30).toString();
    });
</script>
</body>
</html>